<template>

  <el-form ref="scmCustomerOrdersRef" :model="form"  label-width="90px" disabled>
    <!--        <el-form-item label="项目ID" prop="projectId">-->
    <!--          <el-input v-model="form.projectId" placeholder="请输入项目ID" />-->
    <!--        </el-form-item>-->
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="订单编号" prop="orderCode">
          <el-input v-model="form.orderCode" placeholder="请输入订单编号" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="订单日期" prop="orderDate">
          <el-date-picker clearable v-model="form.orderDate" type="date" value-format="YYYY-MM-DD"
                          placeholder="请选择订单日期">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="客户名称" prop="buyerTitle">
      <el-input v-model="form.buyerTitle" placeholder="请输入甲方抬头" />
    </el-form-item>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="订单到货日" prop="requestedDeliveryDate">
          <el-date-picker clearable v-model="form.requestedDeliveryDate" type="date" value-format="YYYY-MM-DD"
                          placeholder="请选择订单到货日">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="到货日回复" prop="repliedDeliveryDate">
          <el-date-picker clearable v-model="form.repliedDeliveryDate" type="date" value-format="YYYY-MM-DD"
                          placeholder="请选择到货日回复">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="8">
        <el-form-item label="订单总金额" prop="totalAmount">
          <el-input v-model="form.totalAmount" placeholder="请输入订单总金额" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="已收款金额" prop="receivedAmount">
          <el-input v-model="form.receivedAmount" placeholder="请输入已收款金额" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="发票金额" prop="invoiceAmount">
          <el-input v-model="form.invoiceAmount" placeholder="请输入发票金额" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
      </el-col>
      <el-col :span="12">
      </el-col>
    </el-row>






    <el-form-item label="支付状态" prop="paymentStatus">
      <el-select v-model="form.paymentStatus" placeholder="请选择支付状态">
        <el-option v-for="dict in scm_payment_status" :key="dict.value" :label="dict.label"
                   :value="parseInt(dict.value)"></el-option>
      </el-select>
    </el-form-item>

    <!--        <el-form-item label="甲方地址" prop="buyerAddress">-->
    <!--          <el-input v-model="form.buyerAddress" placeholder="请输入甲方地址" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="甲方联系人" prop="buyerPerson">-->
    <!--          <el-input v-model="form.buyerPerson" placeholder="请输入甲方联系人" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="甲方电话" prop="buyerPhone">-->
    <!--          <el-input v-model="form.buyerPhone" placeholder="请输入甲方电话" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="甲方开户银行" prop="buyerAccountBank">-->
    <!--          <el-input v-model="form.buyerAccountBank" placeholder="请输入甲方开户银行" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="甲方银行账号" prop="buyerAccountNumber">-->
    <!--          <el-input v-model="form.buyerAccountNumber" placeholder="请输入甲方银行账号" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="甲方签署日期" prop="buyerSignDate">-->
    <!--          <el-date-picker clearable v-model="form.buyerSignDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择甲方签署日期">-->
    <!--          </el-date-picker>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="乙方抬头" prop="sellerTitle">-->
    <!--          <el-input v-model="form.sellerTitle" placeholder="请输入乙方抬头" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="乙方地址" prop="sellerAddress">-->
    <!--          <el-input v-model="form.sellerAddress" placeholder="请输入乙方地址" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="乙方联系人" prop="sellerPerson">-->
    <!--          <el-input v-model="form.sellerPerson" placeholder="请输入乙方联系人" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="乙方电话" prop="sellerPhone">-->
    <!--          <el-input v-model="form.sellerPhone" placeholder="请输入乙方电话" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="乙方开户银行" prop="sellerAccountBank">-->
    <!--          <el-input v-model="form.sellerAccountBank" placeholder="请输入乙方开户银行" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="乙方银行账号" prop="sellerAccountNumber">-->
    <!--          <el-input v-model="form.sellerAccountNumber" placeholder="请输入乙方银行账号" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="乙方签署日期" prop="sellerSignDate">-->
    <!--          <el-date-picker clearable v-model="form.sellerSignDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择乙方签署日期">-->
    <!--          </el-date-picker>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="合同文件名字" prop="contractFileName">-->
    <!--          <el-input v-model="form.contractFileName" placeholder="请输入合同文件名字" />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="合同文件路径" prop="contractFile">-->
    <!--          <file-upload v-model="form.contractFile"/>-->
    <!--        </el-form-item>-->
    <el-form-item label="备注" prop="remarks">
      <el-input v-model="form.remarks" type="textarea" placeholder="请输入内容" />
    </el-form-item>
    <el-divider content-position="center">客户订单明细信息</el-divider>
    <!--        <el-row :gutter="10" class="mb8">-->
    <!--          <el-col :span="1.5">-->
    <!--            <el-button type="primary" icon="Plus" @click="handleAddScmCustomerOrderItems">添加</el-button>-->
    <!--          </el-col>-->
    <!--          <el-col :span="1.5">-->
    <!--            <el-button type="danger" icon="Delete" @click="handleDeleteScmCustomerOrderItems">删除</el-button>-->
    <!--          </el-col>-->
    <!--        </el-row>-->
    <el-table :data="scmCustomerOrderItemsList" :row-class-name="rowScmCustomerOrderItemsIndex"
              @selection-change="handleScmCustomerOrderItemsSelectionChange" ref="scmCustomerOrderItems">
      <!--          <el-table-column type="selection" width="50" align="center" />-->
      <el-table-column label="序号" align="center" prop="index" width="50" fixed />
      <el-table-column label="图号" align="center" prop="scmProjectProducts.drawingNumber" fixed width="100" />
      <!--          <el-table-column label="版本" align="center" prop="scmProjectProducts.version"  />-->
      <!--          <el-table-column label="内版本" align="center" prop="scmProjectProducts.internalVersion"  />-->
      <el-table-column label="品名" align="center" prop="scmProjectProducts.productName" />
      <!--          <el-table-column label="材质" align="center" prop="scmProjectProducts.material"  />-->
      <!--          <el-table-column label="规格" align="center" prop="scmProjectProducts.specification"  />-->
      <!--          <el-table-column label="颜色" align="center" prop="scmProjectProducts.color" />-->

      <el-table-column label="单价" prop="unitPrice" width="80" />
      <el-table-column label="数量" prop="quantity" width="80" />
      <el-table-column label="金额" prop="amount" width="80" />
      <el-table-column label="模具费" prop="moldCost" width="80" />
      <el-table-column label="工装费" prop="jigCost" width="80" />
      <!--          <el-table-column label="订单到货日" prop="requestedDeliveryDate" width="240">-->
      <!--            <template #default="scope">-->
      <!--              <el-date-picker clearable v-model="scope.row.requestedDeliveryDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择订单到货日">-->
      <!--              </el-date-picker>-->
      <!--            </template>-->
      <!--          </el-table-column>-->
      <!--          <el-table-column label="到货日回复" prop="repliedDeliveryDate" width="240">-->
      <!--            <template #default="scope">-->
      <!--              <el-date-picker clearable v-model="scope.row.repliedDeliveryDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择到货日回复">-->
      <!--              </el-date-picker>-->
      <!--            </template>-->
      <!--          </el-table-column>-->
    </el-table>

    <!--        <el-divider content-position="center">发票明细信息</el-divider>-->


    <!--        <el-divider content-position="center">收款明细信息</el-divider>-->

  </el-form>

</template>

<script setup>
import {getScmCustomerOrders} from "@/api/scm/scmCustomerOrders.js";

const { proxy } = getCurrentInstance();
const props = defineProps({
  orderId: {
    type:  [Number, String], // 支持数字或字符串类型,
    default: ''
  }
})

watch(
    () => props.orderId,
    (newOrderId) => {
      if (newOrderId) {
        nextTick(() => {
          handleOrderCodeClick(newOrderId);
        });
      }
    }
);

const form = ref({});
const scmCustomerOrderItemsList = ref([]);

// 表单重置
function reset() {
  form.value = {
    id: null,
    projectId: null,
    orderCode: null,
    orderDate: null,
    requestedDeliveryDate: null,
    repliedDeliveryDate: null,
    totalAmount: null,
    receivedAmount: null,
    invoiceAmount: null,
    paymentStatus: null,
    buyerTitle: null,
    buyerAddress: null,
    buyerPerson: null,
    buyerPhone: null,
    buyerAccountBank: null,
    buyerAccountNumber: null,
    buyerSignDate: null,
    sellerTitle: null,
    sellerAddress: null,
    sellerPerson: null,
    sellerPhone: null,
    sellerAccountBank: null,
    sellerAccountNumber: null,
    sellerSignDate: null,
    contractFileName: null,
    contractFile: null,
    remarks: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null
  };
  scmCustomerOrderItemsList.value = [];
  proxy.resetForm("scmCustomerOrdersRef");
}

// 在<script setup>中添加
function handleOrderCodeClick() {
  // 重置表单
  reset();

  // 加载选中行的数据
  getScmCustomerOrders(props.orderId).then(response => {
    form.value = response.data;
    scmCustomerOrderItemsList.value = response.data.scmCustomerOrderItemsList;
  });
}

/** 供应商订单明细序号 */
function rowScmCustomerOrderItemsIndex({ row, rowIndex }) {
  row.index = rowIndex + 1;
}

handleOrderCodeClick();

</script>